<div id="map" #map [ngStyle]="{ height: '100vh' }"></div>

<div style="position: absolute;left: 0;top: 30px;" id="toolBar">
  <button (click)="full()">
    quantu
  </button>
  <button (click)="this.operation.zoomPrev()">prev</button>
  <button (click)="this.operation.zoomNext()">next</button>

  <button (click)="this.operation.zoomIn()">zoomIn</button>
  <button (click)="this.operation.zoomOut()">zoomOut</button>

  <button (click)="this.operation.default()">Init</button>

  <button (click)="draw()">draw</button>
  <button (click)="clear()">clear</button>

  <button (click)="addGraphic()">addGraphic</button>
</div>

<div id="districtLocation">
  行政区定位 <br />
  省级行政区:
  <select
    name=""
    id=""
    [(ngModel)]="level0Selected"
    (ngModelChange)="
      this.getAdministrative(0, $event, 'level1');
      this.level2 = this.level1 = []
    "
  >
    <option [value]="item.cityCode" *ngFor="let item of level0">{{
      item.name
    }}</option>
  </select>
  <br />
  市级行政区:
  <select
    name=""
    id=""
    [(ngModel)]="level1Selected"
    (ngModelChange)="
      this.getAdministrative(0, $event, 'level2'); this.level2 = []
    "
  >
    <option [value]="item.cityCode" *ngFor="let item of level1">{{
      item.name
    }}</option>
  </select>
  <br />
  县级行政区:
  <select
    name=""
    id=""
    [(ngModel)]="level2Selected"
    (ngModelChange)="this.getAdministrative(0, $event, null)"
  >
    <option [value]="item.cityCode" *ngFor="let item of level2">{{
      item.name
    }}</option>
  </select>
</div>
